<template>
  <el-container ref="bigModel" class="main-model">
    <el-header>
      <Header :active-title="2" />
    </el-header>
    <el-main>
      <b-map class="testMap" v-if="center" ref="mapmarkInfoRef" :center="center" :zoom="zoom"
        @markerClick="markerHandle" @markerClickdetail="markerHandledetail">
      </b-map>
      <!-- <markerInfo1
        :initData="markerInfoData"
        v-show="markerInfoShow"
        @closeFn="closeFn"
      ></markerInfo1> -->
      <img v-show="rightModelShow" :src="require('@/assets/xd/new/Group 1142813242.png')" alt="" class="hiddenClass"
        @click="hideRightModel" />
      <img v-show="!rightModelShow" :src="require('@/assets/xd/new/Group 1142813263.png')" alt="" class="showClass"
        @click="showRightModel" />
      <div v-show="rightModelShow" class="home-model-right">
        <div class="infoModel">
          <div class="infoTitle flex-container">
            设备位置泄露风险统计11
            <!-- 跳转设备管理页面 -->
            <el-button type="text" @click="showequipment" class="more">
              更多
            </el-button>
          </div>
          <div class="infoContent" :style="{ height: infoHeight + 'px' }">
            <pie />
          </div>
        </div>
        <div class="infoModel">
          <div class="infoTitle flex-container">
            设备位置泄露风险告警
            <!-- 跳转终端页面 -->
            <el-button type="text" @click="showequipment" class="more">
              更多
            </el-button>
          </div>
          <div class="infoContent" :style="{ height: infoHeight + 'px' }">
            <list-scroll class="box" :speed="infoList.length > 5 ? 0.5 : 0">
              <div class="list">
                <div class="infoItem1" v-for="(item, index) in infoList" :key="index"
                  @click="toantiLocalizationdetail(item)">
                  <div class="_num">
                    {{ index + 1 }}
                  </div>
                  <div class="_cont">
                    {{ item.equipOrg }} {{ item.equipIp }} 风险距离为{{
                      item.beforeRiskDistance
                    }}KM
                  </div>
                </div>
              </div>
            </list-scroll>
          </div>
        </div>
        <div class="infoModel">
          <div class="infoTitle flex-container">
            设备抗定位任务列表
            <!-- 跳转终端页面 -->
            <el-button type="text" @click="showantiLocalization" class="more">
              更多
            </el-button>
          </div>
          <div class="infoContent" :style="{ height: infoHeight + 'px' }">
            <list-scroll class="box" :speed="infoList2.length > 5 ? 0.5 : 0">
              <div class="list">
                <div class="infoItem2" v-for="(item, index) in infoList2" :key="index" @click="tonetworkestimateDetail(item)">
                  <div class="_num">
                    {{ index + 1 }}
                  </div>
                  <div class="_cont">
                    {{ item.protectedIp }}位置保护任务状态--
                    <span v-for="dict in dict.type.anti_taskstate">
                      <span v-if="item.taskState == dict.value">
                        {{ dict.label }}
                      </span>
                    </span>
                  </div>
                </div>
              </div>
            </list-scroll>
          </div>
        </div>
      </div>
      <el-dialog class="maindialog" title="新建抗定位任务" :visible.sync="dialogVisible" width="40%" z-index="10000">
        <div style="max-height: 60vh; overflow: auto">
          <div class="">
            <el-descriptions title="设备信息" v-if="itemDetail">
              <el-descriptions-item label="IP地址">
                {{ itemDetail.equipIp }}
              </el-descriptions-item>
              <el-descriptions-item label="归属单位" style="width: 50">
                {{ itemDetail.equipOrg }}
              </el-descriptions-item>
              <el-descriptions-item label="设备真实地理位置">
                {{ itemDetail.equipAddress }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <!-- 下面部分 -->
          <div class="">
            <el-descriptions title="抗定位配置">
              <el-descriptions-item label="干扰方式">
                <el-radio-group v-model="radioVal" @input="handleRadioChange">
                  <el-radio label="2"> 基于时延混淆的抗定位 </el-radio>
                  <el-radio label="1"> 基于虚假地标的抗定位 </el-radio>
                  <el-radio label="3"> 基于匿名路由的抗定位 </el-radio>

                </el-radio-group>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <!-- 虚假web地标信息列表 -->
          <div v-if="radioVal == 1">
            <span>虚假web地标信息列表</span>
            <el-table ref="singleTable" :data="tableData" style="width: 100%; height: 100%" @row-click="handleRowClick"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"></el-table-column>
              <!-- <el-table-column label="" width="55">
                <template slot-scope="scope">
                  <el-radio
                    v-model="selectedRow"
                    :label="scope.$index + 1"
                    @change="handleSelectionChange(scope.$index + 1, scope.row)"
                  />
                </template>
</el-table-column> -->
              <el-table-column prop="fakeIp" label="IP地址">
                <template slot-scope="scope">
                  {{ scope.row.fakeIp }}:{{ scope.row.port || 80 }}
                </template>
              </el-table-column>
              <!-- 端口设置成可以输入的 -->
              <!-- <el-table-column prop="port" label="端口" /> -->
              <el-table-column prop="fakeLocation" label="虚假地标标称位置" />
              <!-- <el-table-column prop="protectedAddress" label="受保护目标" /> -->
            </el-table>
          </div>
          <div v-if="radioVal == 2">
            <span>设置回复延迟：</span>
            <el-input ref="inputTime" v-model="input1" placeholder="XX(毫秒)" style="width: 150px" @input="handleInput" />
          </div>
          <div slot="footer" class="dialog-footer" style="text-align: right">
            <el-button type="primary" @click="dialogVisible = false">
              取消
            </el-button>
            <el-button type="primary" @click="showDetails"> 提交 </el-button>
          </div>
        </div>
      </el-dialog>
      <el-dialog class="maindialog2" :visible.sync="dialogDetails" width="30%" z-index="10000">
        <template #title>
          <div style="
              font-weight: bold;
              font-size: 20px;
              color: #fff;
              text-align: center;
            ">
            新建设备抗定位任务
          </div>
        </template>
        <span class="dialogDetailstext">新建设备抗定位任务完成，任务执行需要一段时间，完成后将在消息框进行提示。</span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogDetails = false">确 定</el-button>
        </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>
<script>
// import Header from "@/views/xd/components/Header";
import Header from "@/views/largeScreen/components/header/index.vue";
import dialog8 from "@/views/xd/components/dialog/dialog8.vue";
import pie from "@/views/xd/components/charts/new/home5.vue";
import ListScroll from "@/components/DtSrcollCopy2";
import BMap from "./components1/bmap.vue";
import markerInfo1 from "./components1/markerInfo1.vue";
import {
  listEquipTask,
  fakeIpList,
} from "@/api/networkEquipment/antiLocalization";
import {
  detailEquip,
  antiPositioningByDelay,
  antiPositioning,
  listEquip,
} from "@/api/networkEquipment/equipment";

export default {
  components: { Header, dialog8, pie, ListScroll, BMap, markerInfo1 },
  dicts: ["anti_taskstate"],
  data() {
    return {
      zoom: null,
      center: null,
      rightModelShow: true,
      dialogDetails: false,
      rightModelSpan: 5,
      leftModelSpan: 19,
      activeIndex: "1",
      activeIndex2: "1",
      formInline: {
        user: "",
        region: "",
      },
      myChart: {},
      pieData: [
        {
          value: 190,
          name: "风险距离<5KM",
        },
        {
          value: 60,
          name: "20KM<风险距离<30KM",
        },
        {
          value: 70,
          name: "20KM<风险距离",
        },
      ],
      pieName: [],
      infoList: [],
      infoList2: [],
      tableData2: [],
      infoHeight: 300,

      scrollTop: 0,
      // 弹窗数据
      input: "设置回复延迟",
      input1: "",
      radioVal: "2",
      selectedRow: [], // 用于存储当前选中的行的索引
      dialogVisible2: false,
      dialogVisible: false,
      tableData: [],
      id: "",
      itemDetail: null,
    };
  },
  async mounted() {
    fakeIpList().then((res) => {
      this.tableData = res.rows
    });
    listEquipTask({ pageNum: 1, pageSize: 20 }).then((res) => {
      this.infoList2 = res.rows || [];
    });
    listEquip({ pageNum: 1, pageSize: 20 }).then((res) => {
      this.infoList = res.rows || [];
    });
    this.infoHeight = (this.$refs.bigModel.$el.offsetHeight - 80) / 3;
    this.id = this.$route.query.id;
    console.log(this.id);
    let { data: detail } = await detailEquip(this.id);
    this.itemDetail = detail;
    this.center = { lng: detail.equipLon, lat: detail.equipLat };
    // this.center = { lng: (Number(detail.equipLon) + Number(detail.beforeEquipRiskLon)) / 2, lat: (Number(detail.equipLat) + Number(detail.beforeEquipRiskLat)) / 2 };
    this.zoom = Math.abs((detail.equipLat - detail.beforeEquipRiskLat) / 6)
    console.log(this.zoom);
    this.$nextTick(() => {
      console.log(detail);
      this.$refs.mapmarkInfoRef.setData({
        points: [
          {
            lng: detail.afterEquipRiskLon,
            lat: detail.afterEquipRiskLat,
            color: "blue",
            params: {
              name: "抗定位后估计位置",
              ...detail,
            },
          },
          {
            lng: detail.equipLon,
            lat: detail.equipLat,
            color: "red",
            params: {
              name: "设备真实地理位罟",
              radius: 100000,
              radius1: 300000,
              radiusFlag: true,
              ...detail,
            },
          },
          {
            lng: detail.beforeEquipRiskLon,
            lat: detail.beforeEquipRiskLat,
            color: "yellow",
            params: {
              name: "抗定位前估计位罟",
              ...detail,
            },
          },
        ],
      });
    });
  },
  methods: {
    handleInput(value) {
      // 使用正则表达式限制输入
      this.input1 = value.replace(/[^\d]/g, ""); // 移除非数字字符
    },
    tonetworkestimateDetail(row){
      this.$router.push('/networkestimateDetail?id='+row.id)
    },
    async toantiLocalizationdetail(row) {
      console.log("清空地图");
      this.$refs.mapmarkInfoRef.clearOverlays();
      let { data: detail } = await detailEquip(row.id);
      this.itemDetail = detail;
      this.center = { lng: detail.equipLon, lat: detail.equipLat };
      // this.center = { lng: (Number(detail.equipLon) + Number(detail.beforeEquipRiskLon)) / 2, lat: (Number(detail.equipLat) + Number(detail.beforeEquipRiskLat)) / 2 };
      this.zoom = Math.abs((detail.equipLat - detail.beforeEquipRiskLat) / 6)
      this.$nextTick(() => {
        console.log(detail);
        this.$refs.mapmarkInfoRef.setData({
          points: [
            {
              lng: detail.afterEquipRiskLon,
              lat: detail.afterEquipRiskLat,
              color: "blue",
              params: {
                name: "抗定位后估计位置",
                ...detail,
              },
            },
            {
              lng: detail.equipLon,
              lat: detail.equipLat,
              color: "red",
              params: {
                name: "设备真实地理位罟",
                radius: 100000,
                radius1: 300000,
                radiusFlag: true,
                ...detail,
              },
            },
            {
              lng: detail.beforeEquipRiskLon,
              lat: detail.beforeEquipRiskLat,
              color: "yellow",
              params: {
                name: "抗定位前估计位罟",
                ...detail,
              },
            },
          ],
        });
      });
    },
    closeFn() {
      this.markerInfoShow = false;
    },
    markerHandle(data) {
      console.log("地图返回的数据", data);
      this.dialogVisible = true;
    },
    markerHandledetail(data) {
      this.$router.push("/networkestimate");
    },
    showDetails() {
      if (this.radioVal == "2") {
        // 基于时延混淆的抗定位
        if (!this.input1) {
          this.$message.warning("请设置回复延时!");
          return;
        }
        antiPositioningByDelay({
          targetIP: this.itemDetail.equipIp,
          delayTime: Number(this.input1),
        }).then((res) => {
          if (res.code == 200) {
            this.dialogVisible = false;
            this.dialogDetails = true;
          }
        });
      } else {
        // 基于虚假地标的抗定位
        if (!this.selectedRow.length) {
          this.$message.warning("请选择虚拟坐标!");
          return;
        }
        let ipList = [];
        this.selectedRow.map((ele) => {
          ipList.push(ele.fakeIp);
        });
        antiPositioning({
          targetIP: this.itemDetail.equipIp,
          clIPList: ipList,
        }).then((res) => {
          if (res.code == 200) {
            this.dialogVisible = false;
            this.dialogDetails = true;
          }
        });
      }
    },
    show() {
      this.$emit("showDialog");
    },
    handleRadioChange(value) {
      if (value == 2) {
        this.$refs.inputTime.focus();
      } else {
        fakeIpList().then((res) => {
          this.tableData = res.rows
        });
      }
    },
    showD() {
      this.dialogVisible = true;
    },
    tonetworkestimate() {
      this.$router.push("/networkestimate");
    },
    showequipment() {
      this.$router.push("/networkEquipment/equipment");
    },
    showantiLocalization() {
      this.$router.push("/networkEquipment/antiLocalization");
    },
    hideRightModel() {
      this.rightModelShow = false;
    },
    showRightModel() {
      this.rightModelShow = true;
    },
    onSubmit() { },

    initDate() {
      for (let i = 0; i < this.pieData.length; i++) {
        this.pieName[i] = this.pieData[i].name;
      }
    },
    handleRowClick(row, column, event) {
      console.log(row, column, event);
    },
    handleSelectionChange(index, row) {
      console.log(row);
      this.selectedRow = index;
    },
  },
};
</script>
<style lang="scss" scoped>
.home-model-right {
  width: 400px;
  position: absolute;
  right: 10px;
  z-index: 100;

  .infoContent {
    padding-top: 48px;
    box-sizing: border-box;
    overflow: hidden;
  }

  .infoModel {
    position: relative;

    .infoTitle {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      background-image: url(~@/assets/xd/new/title.png);
      background-size: 100% 80%;
      background-repeat: no-repeat;
      color: #fff;
    }

    .infoBody {
      height: 100%;
      padding-top: 48px;
      box-sizing: border-box;
    }
  }
}

.home-model-left {
  position: relative;
  height: 100%;
}

.home-model {
  position: relative;
  width: 100%;
  height: 100%;
}

.body {
  font-size: 18px;
  position: absolute;
  top: 60px;
  right: 10px;
  padding: 8px;
  color: #90cee9;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  padding: 30px;
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/xd/dialogbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10000;
}

.Dialog1 {
  position: absolute;
  left: 100px;
  top: 200px;
  width: 420px;
  height: 250px;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 22px;
  color: #ffffff;
  line-height: 1px;
  text-align: left;
  font-style: normal;
  text-align: center;
  font-weight: bold;
}

.Tc {
  position: absolute;
  bottom: 10px;
  right: 30px;
  width: 400px;
  height: 300px;
}

.flex-container {
  display: flex;
  justify-content: space-between;
}

.scroll-div {
  margin-top: 10px;
  overflow: hidden;
  animation: scroll 1s linear infinite;
}

.infoItem {
  line-height: 1.3em !important;
  font-size: 18px;
}

.home-model-right .infoModel .infoTitle {
  z-index: 1;
}

.infoList {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.scroll-div {
  position: absolute;
  width: 100%;
  bottom: -1px;
  margin-top: 10px;
  overflow: hidden;
  border-top-left-radius: 30px;
}

.el-header {
  padding: 0;
  z-index: 5;
}

.more {
  color: #fff;
  font-size: 22px;
  font-weight: bold;
}

.zindexModel {
  position: absolute;
  background-color: #153968a6;

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.testMap {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 4;
}

.hiddenClass {
  height: 100%;
  position: absolute;
  right: 400px;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  z-index: 100;
}

.showClass {
  height: 100%;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  z-index: 100;
}

::v-deep .tc {
  right: 30%;
}

.el-table {
  min-height: auto !important;

  &::before {
    height: 0px;
  }
}

.dialogDetailstext {
  font-size: 18px;
  font-weight: bolder;
  color: #fff;
}
</style>
